<template>
    <div class="top">
        <!-- 面包屑导航 -->
        <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item to='/index'>首页</el-breadcrumb-item>
            <el-breadcrumb-item v-for="(v, i) in menuArr" :to='v.path' :key="i">{{ v.name }}</el-breadcrumb-item>
        </el-breadcrumb>

        <!-- 管理员信息 -->
        <el-dropdown trigger="click" @command="jump">
            <span class="el-dropdown-link">
                欢迎你,{{ account }} &emsp;
                <el-avatar :size="50" :src="imgUrl"></el-avatar>
            </span>
            <el-dropdown-menu slot="dropdown">
                <el-dropdown-item command="/account/personal">个人信息</el-dropdown-item>
                <el-dropdown-item command="/login">退出登录</el-dropdown-item>
            </el-dropdown-menu>
        </el-dropdown>
    </div>
</template>

<script>
import local from '@/utils/local.js'
import { suerInfo } from '@/api/user.js'
export default {
    data () {
        return {
            imgUrl: "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png",

            //面包屑导航数据
            menuArr: [],
            account: ''
        }
    },
    methods: {
        jump (path) {
            this.$router.push(path)
            if (path === '/login') {
                local.clear()
            }
        },
        //渲染面包屑
        render () {
            //筛选出有meta属性的路由
            let arr = this.$route.matched.filter(v => v.meta.title)
            this.menuArr = arr.map(v => {
                return { name: v.meta.title, path: v.path }
            })
        }
    },
    async created () {
        this.render()
        //获取账号信息
        let res = await suerInfo()
        this.imgUrl = res.data.imgUrl
        this.account = res.data.account
        local.set('userinfo', res.data)//将账号信息存储到本地

        //绑定事件，接收头像参数，实现头像联动
        this.$bus.$on('sendImg', (url) => {
            this.imgUrl = url; //注意this会被改指向，所以要用箭头函数
        });

    },

    watch: {
        "$route.path" (v) {
            this.render()
        }
    }


}

</script>


<style lang="less" scoped>
.top {
    display: flex;
    justify-content: space-between;
    align-items: center;

    .el-dropdown {
        &>span {
            display: flex;
            justify-content: center;
            align-items: center;
        }
    }
}
</style>